<template>
  <div class="goods-edit">
    <sx-common-form-base id="f1" ref="baseForm" :data="data" :form="form">
			<template slot="cover" slot-scope="scope">
        <div>
          <img v-if="form[scope.data.prop]" :src="form[scope.data.prop]" class="avatar"  @click="showUpload('upload')">
  				<i v-else class="el-icon-plus avatar-uploader-icon" @click="showUpload('upload')"></i>
          <sx-common-form-upload ref="upload" action="/dev/common/upload" :attachments="[]" uploadType="project" :on-success="successFn"></sx-common-form-upload>
        </div>
			</template>
      <template slot-scope="scope" slot="imgs">
        <div class="_flex">
          <template v-for="(item,index) in form[scope.data.prop]">
            <img v-if="item.code==='0'" :src="item.data.url" class="avatar" :key="index" style="margin-right:10px">
          </template>
          <i class="el-icon-plus avatar-uploader-icon" @click="showUpload('imgs')"></i>
          <sx-common-form-upload ref="imgs" action="/dev/common/upload" :attachments="form[scope.data.prop]" uploadType="project"></sx-common-form-upload>
        </div>
      </template>
			<template slot="detail" slot-scope="scope">
				<div>
					<sx-common-form-richtext id="rich" v-model="form[scope.data.prop]" tinymcePath="./tinymce-5.1.1/"></sx-common-form-richtext>
				</div>
			</template>
		</sx-common-form-base>
		<div class="_flex-center" style="margin-bottom:20px">
			<el-row>
			<el-button type="danger" @click="nav('goodsList')">返回</el-button>
      <el-button type="primary" @click="add">添加</el-button>
    </el-row>
		</div>
  </div>
</template>

<script>
import SxCommonFormBase from 'sx-common-form-base'
import 'sx-common-form-base/theme-default/lib/index.css'
import SxCommonFormRichtext from 'sx-common-form-richtext'
import 'sx-common-form-richtext/theme-default/lib/index.css'
import SxCommonFormUpload from 'sx-common-form-upload'
import 'sx-common-form-upload/theme-default/lib/index.css'
  export default {
    components: {
			SxCommonFormBase,
      SxCommonFormRichtext,
      SxCommonFormUpload
    },
    data() {
      return {
        data:[
					{
            label: "商品名称：",
            prop: "goodsName",
            controlType: "input",
						rulesText: "text",
						span:24,
            isMust: true,
					},
					{
						label: "商品封面",
						prop: "cover",
						controlType: "slot",
						rulesText: "text",
						span:24,
						isMust: false
          },
          {
						label: "商品轮播图",
						prop: "imgs",
						controlType: "slot",
						rulesText: "text",
						span:24,
						isMust: false
					},
					{
            label: "价格：",
            prop: "price",
            controlType: "input",
            rulesText: "float",
            isMust: true,
					},
					{
            label: "划线价：",
            prop: "linePrice",
            controlType: "input",
            rulesText: "float",
            isMust: true,
					},
					{
            label: "库存：",
            prop: "num",
            controlType: "input",
            rulesText: "text",
            isMust: true,
          },
          {
            label: "规格：",
            prop: "size",
            controlType: "input",
            rulesText: "text",
            isMust: true,
					},
					{
						label: "商品详情",
						prop: "detail",
						controlType: "slot",
						rulesText: "text",
						span:24,
						isMust: false
					}
        ],
        form:{
          goodsName:'',
          cover:"",
          imgs:[],
          price:"",
          linePrice:"",
          num:"",
					size:"",
					detail:"<p></p>",
        },
      }
		},
		methods: {
      showUpload(name) {
        this.$refs[name].open()
      },
			successFn(res,file,list) {
				console.log(res,list)
				if(res.code==="0"){
					this.form.cover = res.data.url
					this.$refs.baseForm.validateField('cover')
				}
			},
			add() {
				this.$refs.baseForm.validate().then(({success,data})=>{
					console.log(success,data)
					if(success){
            data.imgs = JSON.stringify(data.imgs)
						this.$api.goodsAdd(data).then(res=>{
							this.$com.toast("添加成功", "success")
						})
					}
				})
			},
			 nav(path) {
      this.$router.push({
        path: path
      });
    },
		},
  }
</script>

<style lang="scss" scoped>
.goods-edit{
  background: #fff;
  padding: 30px 0 0;
}
.avatar-uploader .el-upload {
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #999;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>